.loader-container {
    position: fixed;
    inset: 0;
    z-index: 999;
    background-color: var(--header-blue);
    display: grid;
    place-items: center;
    color:rgba(3, 36, 65, 0.7);
    transition: opacity .4s ease-in-out, visibility .4s ease-in-out;
    opacity: 1;
    visibility: visible;
    /* border: 1px solid red; */

}


.loader-container.hidden {
    opacity: 0;
    visibility: hidden;
}


#loader {
    /* display: flex; */
    /* width: fit-content; */
    height: 100px;
    /* padding: 100px; */
    /* border: 1px solid red; */
    /* align-items: center; */

}

#loader g {
    fill: none;
    stroke: var(--header-line);
    stroke-width: 0.14px;
    stroke-dasharray: 42.38;
    stroke-dashoffset: 42;
    animation: 2s ease-in-out infinite alternate animate-stroke;
}


@keyframes animate-stroke {

    50% {
        fill: transparent;
        stroke-dashoffset: 42 ;
    }

    100% {
        stroke-dashoffset: 0 ;
        /* fill: rgb(255, 200, 0); */
        stroke:rgb(0, 0, 0);
    }
}


#page-container {
    opacity: 0;
    transform: translate3d(0,-1rem,0);
    transition: opacity .3s ease-in-out, transform .6s ease-in-out;
}

#page-container.visible {
    opacity: 1;
    transform: translate3d(0,0,0);
}